<template>
  <div class="demo-progress">
    <el-progress :type="type" :percentage="percentage" :color="color" />
  </div>
</template>
  
<script setup>
import { onMounted, ref } from "vue";
import { Minus, Plus } from "@element-plus/icons-vue";
var radix = 6;
var progress = 10;
var time = 500;
var color1 = "#f56c6c";
var color2 = "#e6a23c";
var color3 = "#5cb87a";
var color4 = "#1989fa";
var color5 = "#6f7ad3";
var percentage1 = 20;
var percentage2 = 40;
var percentage3 = 60;
var percentage4 = 80;
var percentage5 = 100;


const percentage = ref(radix);
const props = defineProps(["options"]);
const { type } = props.options;
const color = [
  { color: color1, percentage: percentage1 },
  { color: color2, percentage: percentage2 },
  { color: color3, percentage: percentage3 },
  { color: color4, percentage: percentage4 },
  { color: color5, percentage: percentage5 },
];
onMounted(() => {
  setInterval(() => {
    percentage.value = (percentage.value % 100) + progress;
  }, time);
});
</script>
<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>